<template>
  <div class="rightOne">
    <div class="title">
      <div class="titleImg"></div>
      <div @click="showResources" style="cursor:pointer">生态名录</div>
    </div>
    <div class="list">
      <div class="list-item" v-for="(item,index) of menuData" :key="index">
        <div class="listImg" :class="item.class"></div>
        <div class="listContent">
          <div>{{item.num}}</div>
          <div class="num-content">{{item.unit}}</div>
        </div>
        <div class="details">详情</div>
      </div>
    </div>
    <div class="layer-legend" v-show="layerShow">
      <div v-for="(item,index) of legendData" :key="index" class="legend-item">
        <span class="legend-color" :style="{'backgroundColor': item.color}"></span>
        <span>{{item.label}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          num: "27.2亿",
          unit: "水资源（万m³）",
          class: "item-img1",
        },
        {
          num: "335.4万",
          unit: "土资源（亩）",
          class: "item-img2",
        },
        {
          num: "367.4万",
          unit: "林资源（亩）",
          class: "item-img3",
        },
        {
          num: "43",
          unit: "珍稀生物资源（种）",
          class: "item-img4",
        },
      ],
      legendData: [
        {
          label: "水体",
          color: "rgb(1,112,254)",
        },
        {
          label: "林地",
          color: "rgb(1,143,117)",
        },
        {
          label: "裸土地",
          color: "rgb(13,91,209)",
        },
        {
          label: "耕地",
          color: "rgb(239,228,190)",
        },
        {
          label: "草地",
          color: "rgb(56,168,1)",
        },
        {
          label: "灌木林地",
          color: "rgb(247,184,22)",
        },
        {
          label: "人造地表",
          color: "rgb(104,104,104)",
        },
      ],
      layerShow: false,
    };
  },
  methods: {
    //加载土地利用数据
    showResources() {
        this.layerShow = !this.layerShow;
      if (!this.layer) {
        let layerProvider = new Cesium.WebMapTileServiceImageryProvider({
          url: "http://192.168.4.120:8310/geoserverplus/gwc/service/wmts",
          layer: "icenter:土地利用数据-PNG-4326",
          tilingScheme: new Cesium.GeographicTilingScheme(),
          style: "default",
          format: "image/png",
          tileMatrixSetID: "EPSG:4326",
        });
        this.layer = viewer.imageryLayers.addImageryProvider(layerProvider);
        viewer.camera.flyTo({
          destination: Cesium.Rectangle.fromDegrees(
            118.00386555346876,
            28.797240705520586,
            118.76373555346876,
            29.543970705520586
          ),
        });
      } else {
        viewer.imageryLayers.remove(this.layer, true);
        this.layer = undefined;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.rightOne
  width vw(530)
  height vh(216)
  box-sizing border-box
  background url('/images/right1.png') no-repeat
  background-size cover
  background-size 100% 100%
  padding vh(20) vw(30)
  .title
    display flex
    padding-bottom vh(10)
    font-size vw(18)
    .titleImg
      width vw(23)
      height vh(23)
      background url('/images/生态圈.png') no-repeat
      background-size cover
      background-size 100% 100%
      margin-right vw(5)
  .list
    width vw(470)
    height vh(150)
    display flex
    justify-content space-around
    flex-direction row
    flex-wrap wrap
    .details
      width vw(32)
      height vh(14)
      border 1px solid #45F4F7
      font-size vw(8)
      border-radius vw(20)
      text-align center
      margin-top vh(15)
      padding vh(5) vw(5)
      color #45F4F7
      span
        display inline-block
    .list-item
      padding vh(10) 0 vh(5) vw(12)
      width vw(215)
      height vh(53)
      display flex
      border-radius vw(3)
      // justify-content space-between
      background linear-gradient(to right, #6199A9, rgba(0, 0, 0, 0))
      .listContent
        color #45F4F7
        font-size vw(18)
        padding vh(3) vw(10)
        width vw(110)
        .num-content
          font-size vw(12)
          color #fff
          padding vh(4) 0
      .listImg
        width vw(43)
        height vh(43)
      .item-img1
        background url('/images/water.png') no-repeat
        background-size cover
        background-size 100% 100%
      .item-img2
        background url('/images/soil.png') no-repeat
        background-size cover
        background-size 100% 100%
      .item-img3
        background url('/images/forest.png') no-repeat
        background-size cover
        background-size 100% 100%
      .item-img4
        background url('/images/animal.png') no-repeat
        background-size cover
        background-size 100% 100%
  .layer-legend
    background-color rgba(32, 50, 82, 0.7)
    border-radius vw(4)
    padding vh(10) 0
    position absolute
    width vw(140)
    // height vw(110)
    bottom vh(5)
    right vw(530)
    .legend-item
      padding vh(5) 0
    span
      line-height vh(15)
      margin-left vw(20)
    .legend-color
    //   background-color red
      width vw(25)
      height vh(15)
      display inline-block
</style>